import React, { memo, Component } from 'react'
import { getClassList, getManageDetail, offShelf, createClass, deleteClass, editClass } from '@/api/user'
import { Spin, Image, Table, Button, Input, Select, message, Modal, Popconfirm } from 'antd'
import './index.css'
import { baseUrl } from '../../assets/baseUrl'
import { formatDate, getDateDiff, exportExcel } from '../../utils/tool'
import ProForm, { ProFormText, ProFormTextArea } from '@ant-design/pro-form';
// import Search from 'antd/lib/transfer/search'
const BaseUrl = baseUrl()
const { Option } = Select;
const { Search } = Input;
class ClassManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      pageSize: 8,
      pageNum: 1,
      tableList: [],
      name: '',//搜索筛选
      forWhich: 'all',//.区分是寻物启事还是失物招领
      found: '',//.已找到失物/失主，未找到失物/失主，用found字段，1代表找到了，0代表没找到
      total: 10,
      addGroupTitle: '编辑',//判断是编辑还是新增
      visible: false,//弹窗
      selectEdit: null,//编辑选中的班级
    }
  }
  componentDidMount() {
    // getClassList({pageSize:10,pageNum:1,numberKey:'',forWhich:'all'}).then(res=>{
    //   console.log(res);
    // })
    this.SuperList()
    getManageDetail().then(res => {
      console.log(res);
    })
  }
  //获取表格数据
  SuperList = () => {
    const { pageSize, pageNum, name, forWhich, found } = this.state;

    getClassList({
      pageSize: pageSize, pageNum: pageNum,
      className: name
    }).then(res => {
      // console.log(res);
      // debugger
      this.setState({
        tableList: res?.data?.data,
        pageNum: res?.data.pagination.pageNum,
        total: res?.data.pagination.total,
        pageSize: res?.data.pagination.pageSize,
      })

    })
  }
  //删除
  deleteFun = (item) => {
    deleteClass({ className: item.className, classId: item.classId }).then(res => {
      // debugger
      if (res.data.code == 200) {
        this.SuperList()
        message.success('操作成功')

      }

    })
  }
  //编辑
  onItemEdit = (item) => {
    /////////////////////////////
    // debugger
    console.log(item);
    // debugger
    this.setState({ addGroupTitle: '编辑', visible: true, selectEdit: item })

  };
  onGroupFinish = (values) => {
    const { addGroupTitle, selectEdit } = this.state
    console.log(values, 'shuju');
    // let res = null;
    if (addGroupTitle === '编辑') {
      //   let list = setList;
      editClass({
        className: values.className,
        announcement: values.announcement,
        corpCellName: values.corpCellName,
        classId: selectEdit.classId
      }).then(res => {
        if (res) {
          // debugger
          if (res.data?.code == '200') {
            this.SuperList()
            message.success(`${addGroupTitle}成功`);
            this.setState({
              visible: false
            })
          } else {
            if (addGroupTitle === '编辑') {
              message.error(`${addGroupTitle}失败`);
            } else {
              message.error('请勿添加重复的班级');
            }
          }
        }
      })

    } else {
      createClass({
        className: values.className,
        announcement: values.announcement,
        corpCellName: values.corpCellName,
      }).then(res => {
        if (res) {
          // debugger
          if (res.data?.code == '200') {
            this.SuperList()
            message.success(`${addGroupTitle}成功`);
            this.setState({
              visible: false
            })
          } else {
            if (addGroupTitle === '编辑') {
              message.error(`${addGroupTitle}失败`);
            } else {
              message.error('请勿添加重复的班级');
            }
          }
        }
      })
    }

  };
  render() {
    const { tableList, addGroupTitle, visible, selectEdit } = this.state
    let columns = [
      {
        title: '班级',
        dataIndex: 'className',
        align: 'center',
        width: 100,
        // render: (i) => i + '月'
      },
      {
        title: '学院',
        dataIndex: 'academy',
        align: 'center',
        width: 200,
      },

      ,
      {
        title: '班级公告',
        dataIndex: 'announcement',
        align: 'center',
        width: 300,
        // render: (i) => i + '年'
      },

      {
        title: '团支部名称',
        dataIndex: 'corpCellName',
        align: 'center',
        width: 200,

        // render:(item,row)=>{
        //   return <TextFlow text={item} clamp={1} width={150}></TextFlow>
        // }
      },
      // {
      //   title: '学校',
      //   dataIndex: 'schoolName',
      //   align: 'center',
      //   width: 100
      // },
      {
        title: '班级动态数量',
        dataIndex: 'commentCount',
        align: 'center',
        width: 200,

      },
      // {
      //   title: 'ID',
      //   dataIndex: 'numberId',
      //   align: 'center',
      //   width: 200,
      // },
      // {
      //   title: '状态',
      //   dataIndex: 'found',
      //   align: 'center',
      //   render: (item) => {
      //     return item==1?<span style={{color:'green'}}>已找到失物/失主</span>:item==2?<span style={{color:'red'}}>已下架</span>
      //     :<span style={{color:'blue'}}>未找到失物/失主</span>
      //   }
      // },{
      //   title: '发布类型',
      //   dataIndex: 'forPeople',
      //   align: 'center',
      //   render: (item,all) => {
      //     return item == 0 ? '寻物启事' :'失物招领'
      //   }
      // },
      // {
      //   title: '作品名称',
      //   dataIndex: 'workName',
      //   align: 'center',
      // },
      // {
      //   title: '指导教师',
      //   dataIndex: 'teachers',
      //   align: 'center',
      // }
      {
        title: '操作',
        align: 'center',
        // width: 200,
        render: (a, _) => {
          return <span>
            <span style={{ cursor: 'pointer', color: '#00c4ff', marginRight: '10px' }}
              onClick={() => this.onItemEdit(_)}
            >编辑</span>
            <Popconfirm
              title="确认删除?"
              description="确认删除?"
              onConfirm={() => { this.deleteFun(_) }}
              // onCancel={cancel}
              okText="确认"
              cancelText="取消"
            >
              <span style={{ cursor: 'pointer', color: 'red' }}
              // onClick={()=>{this.deleteFun(_.numberId)}}
              >删除</span>
            </Popconfirm></span>


        }
      }
    ]
    //分页器
    const pagination = {
      current: this.state.pageNum,
      pageSize: this.state.pageSize,
      onChange: (e, a) => {
        this.setState(
          {
            pageNum: e,
            pageSize: a
          },
          () => {
            this.SuperList()
          }
        )
      },
      total: this.state.total
    }
    return (

      <div className='setting-opration'>
        <div style={{ padding: '6px 36px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
            <div style={{ marginRight: 24, marginTop: 24 }}>
              {/* 搜索： */}
              <Search placeholder='输入班级名称搜索' onSearch={(e) => { this.setState({ name: e }, () => this.SuperList()) }} />

            </div>
            {/* <div style={{ marginRight: 24, marginTop: 24 }}>
                帖子类型：
                <Select
                  defaultValue="全部"
                  style={{ width: 120 }}
                  onChange={(e) => {
                    this.setState(
                      {
                        forWhich: e
                      },
                      () => this.SuperList()
                    )
                  }}
                >
                  <Option value="all">全部</Option>
                  <Option value='forThing'>寻物</Option>
                  <Option value='forPeople'>失物招领</Option>
                </Select>
              </div>
              <div style={{ marginRight: 24, marginTop: 24 }}>
                完成情况：
                <Select
                  defaultValue="全部"
                  style={{ width: 120 }}
                  onChange={(e) => {
                    this.setState(
                      {
                        found: e
                      },
                      () => this.SuperList()
                    )
                  }}
                >
                  <Option value="">全部</Option>
                  <Option value='1'>已找到失物/失主</Option>
                  <Option value='0'>未找到失物/失主</Option>
                </Select>
              </div> */}
            <div style={{ marginRight: 24, marginTop: 24 }}>
              <Button type="primary" onClick={() => { this.setState({ visible: true, selectEdit: {}, addGroupTitle: '新增' }) }}>新增</Button></div>
            {/* <div style={{ marginRight: 24, marginTop: 24 }}>
                <Button
                  onClick={this.reflashTable.bind(this, 'download')}
                  type="primary"
                >
                  导出excel
                </Button>
              </div> */}
          </div>
          <div style={{ marginTop: 12, paddingBottom: 200 }}>
            <Table
              columns={columns}
              dataSource={tableList}
              // onChange={this.changeTable.bind(this)}
              // locale={{
              //   cancelSort: '点击取消排序',
              //   triggerAsc: '点击升序',
              //   triggerDesc: '点击降序'
              // }}
              pagination={pagination}
            />
          </div>
          <Modal
            maskClosable={false}
            title={`${addGroupTitle == '编辑' ? '编辑' : '新增'}`}
            visible={visible}
            onCancel={() => {
              this.setState({ visible: false })
            }}
            footer={null}
            bodyStyle={{
              textAlign: 'right',
            }}
            // width={`${addGroupTitle == '编辑' ? 1500 : 'none'}`}
            destroyOnClose
          >
            <ProForm
              submitter={{
                searchConfig: {
                  resetText: '取消',
                  submitText: '确定',
                },
              }}
              onFinish={this.onGroupFinish}
              onReset={() => {
                this.setState({ visible: false })
                //   setSetList({});
              }}
            // formRef={form}
            >
              <ProFormText
                initialValue={addGroupTitle == '编辑' ? selectEdit?.className : ''}
                required
                name="className"
                label="班级名称"
                placeholder="请输入班级名称"
                rules={[{ required: true, message: '这是必填项' }]}
              />
              <ProFormText
                initialValue={addGroupTitle == '编辑' ? selectEdit?.announcement : ''}
                required
                name="announcement"
                label="团支部名称"
                placeholder="请输入团支部名称"
                rules={[{ required: true, message: '这是必填项' }]}
              />
              <ProFormTextArea
                initialValue={addGroupTitle == '编辑' ? selectEdit?.corpCellName : ''}
                required
                name="corpCellName"
                label="班级公告"
                placeholder="请输入班级公告"
                rules={[{ required: true, message: '这是必填项' }]}
              />
            </ProForm>
          </Modal>
        </div>
      </div>

    )
  }
}
export default memo(ClassManage)